<template>
  <el-form ref="formobj" :model="wyform" :rules="rules" label-width="100px">
    <el-form-item label="科室" prop="deptmentId">
      <el-select v-model="wyform.deptmentId" placeholder="请选择所在科室" filterable>
        <el-option
            v-for="key in editorData.depts"
            :key="key.id"
            :label="key.name"
            :value="key.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="挂号级别" prop="registLevelId">
      <el-select v-model="wyform.registLevelId" placeholder="请选择挂号级别" filterable>
        <el-option
            v-for="key in editorData.regists"
            :key="key.id"
            :label="key.registName"
            :value="key.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="排班" prop="schedulingId">
      <el-select v-model="wyform.schedulingId" placeholder="请选择排班" filterable>
        <el-option
            v-for="key in editorData.schedulings"
            :key="key.id"
            :label="key.ruleName"
            :value="key.id"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="姓名" prop="realname">
      <el-input v-model="wyform.realname" maxlength="20" placeholder="请输入科室姓名"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password" >
      <el-input show-password v-model="wyform.password" maxlength="64" placeholder="请输入密码"></el-input>
    </el-form-item>
    <el-form-item label="手机号" prop="phone">
      <el-input v-model="wyform.phone" maxlength="64" placeholder="请输入手机号"></el-input>
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="wyform.email" maxlength="128" placeholder="请输入邮箱"></el-input>
    </el-form-item>
    <el-form-item label="头像" prop="icon">
      <el-upload
        action="#"
        list-type="picture-card"
        :limit="1"
        :auto-upload="false"
        :on-change="changeFile"
        :on-remove="removeFile"
      >
        <el-icon><Plus/></el-icon>

      </el-upload>
<!--      <img v-model="wyform.icon"></img>-->
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="save">保存</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { post, get } from '@/util/axios'
import { url } from './api'
import {Plus} from "@element-plus/icons-vue";
getEditData()
const props = defineProps(['id'])
if (props.id) {
  getById()
}
const wyform = reactive({
  deptmentId: null,
  registLevelId:null,
  schedulingId:null,
  phone: '',
  realname: '',
  email: '',
  file:null,
  password:''
})
const editorData=reactive({
  depts:[],
  regists:[],
  schedulings:[]
})
const emits = defineEmits(['update:show', 'getTableData'])
const rules = reactive({
  deptmentId: [
    { required: true, message: '请选择科室', trigger: 'blur' }
  ],
  registLevelId: [
    { required: true, message: '请选择挂号级别', trigger: 'blur' }
  ],
  schedulingId: [
    { required: true, message: '请选择排班', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type:'email',message: "请输入正确邮箱",trigger: "blur"},
    { validator: (rule, value, callback) => { check(rule, value, callback, 'email') }, message: '该邮箱已经存在', trigger: 'blur'  }
  ],
  file: [
    { required: true, message: '上传头像', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' }
  ],
  realname: [
    { required: true, message: '请输入姓名', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^(13[0-9]|14[5|7|9]|15[0-3|5-9]|16[2|5|6|7]|17[0-8]|18[0-9]|19[8|9])\d{8}$/, message: '请输入正确的手机号', trigger: 'blur' },
    { validator: (rule, value, callback) => { check(rule, value, callback, 'phone') }, message: '该手机号已经存在', trigger: 'blur'  }
  ]
})
const formobj = ref()
function getById () {
  get(url.getById, { id: props.id }, content => {
    for (const key in wyform) {
      if (Object.prototype.hasOwnProperty.call(content, key)) {
        wyform[key] = content[key]
      }
    }
    wyform.id = props.id
  })
}
function changeFile(file){
  console.log(file.raw)
  wyform.file=file.raw
}
function removeFile(){
  wyform.file=null
}

function save () {
  post(props.id ? url.update : url.add, wyform, content => {
    emits('update:show', false)
    emits('getTableData')
  }, formobj)
}
function check (rule, value, callback, field) {
  get(url.check, { field, value, id: props.id }, content => {
    if (content) {
      callback()
    } else {
      callback(new Error())
    }
  })
}
function getEditData () {
  get(url.getEditData, {}, content => {
    editorData.depts=content.depts
    editorData.regists=content.regists
    editorData.schedulings=content.schedulings
    console.log(content)
  })

}
</script>

<style scoped lang="scss">
</style>
